<template>
  <div>
    <div>vuex</div>
    <div>{{ store.state.count }}</div>
    <div>
      <el-button type="primary" @click="increment">+</el-button>
      <el-button type="danger" @click="reduce">-</el-button>
      <el-button type="default" @click="get">getter</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'

const store = useStore()
const increment = () => {
  store.commit('increment')
  console.log(store.state.count)
}
const reduce = () => {
  store.commit('reduce')
  console.log(store.state.count)
}
const get = () => {
  //Elementplus 组件 弹出显示 getter
  ElMessage.success('store.getters.count' + store.getters.count)
}
</script>

<style scoped></style>
